<!-- 
	版本声明：
	* 由于 WanlLive、WanlChat、WanlPay 以下代码开发难度较大，已将相关代码独立申请著作权，受法律保护！！！
	* 无论你购买任何版本，均不允许复制到第三方直接、间接使用，且也不能以学习为目的参考和借鉴！！
	* 你仅有在 WanlShop 中使用、二次开发权利，否则我们会追究法律责任 
	* 深圳前海万联科技有限公司 @www.i36k.com
	* 法律顾问：易法通 @http://www.yifatong.com/
-->
<template>
    <view class="video">
        <view
            class="empty position-center align-center justify-center"
            v-if="videoList.length === 0 && status !== 'loading'"
        >
            <view> </view>
        </view>
        <swiper
            vertical
            acceleration
            :current="videoIndex"
            :style="{ width: width + 'px', height: height + 'px' }"
            @change="changeCurrent"
            @animationfinish="animationFinish"
        >
            <swiper-item v-for="(item, index) in videoList" :key="index">
                <!-- 视频预渲染 +1 -->
                <block v-if="Math.abs(videoIndex - index) <= 1">
                    <!-- <block v-if="videoIndex === index"> -->
                    <view @click="handleClicked">
                        <!-- 播放界面 -->
                        <wanl-find-video
                            ref="wanlVideo"
                            :width="width"
                            :height="height"
                            :src="item.video.url"
                            :play="item.play"
                            :videoId="item.id"
                            :coverUrl="item.video.cover_url"
                            :objectFit="item.video.fit"
                            :gDuration="item.video.duration"
                            :initialTime="item.initialTime"
                            @pause="pauseVideo"
                        />
                        <!-- 组件 -->
                        <view class="position-bottom-center" :style="{ bottom: `${safeBottom}` }">
                            <view class="flex-direction justify-between align-end padding-lr-bj padding-bottom-sm">
                                <view class="flex-sub padding-right-bj">
                                    <view v-if="item.shop" class="left-title" @click.stop="handleShop(item.shop.id)">
                                        <text class="text-white margin-bottom-s text-lg"
                                            >@{{ item.shop.shopname }}</text
                                        >
                                    </view>
                                    <view v-if="item.user" class="left-title" @click.stop="handleUser(item.user_no)">
                                        <text class="text-white margin-bottom-s text-lg"
                                            >@{{ item.user.nickname }}</text
                                        >
                                    </view>
                                    <view class="left-describe flex-direction">
                                        <!-- #ifndef APP-PLUS -->
                                        <!-- <text class="text-orange text-df" @click.stop="handleTag">#标题测试#</text> -->
                                        <!-- #endif -->
                                        <text class="text-lines-3 flex-sub text-df text-white-8">{{
                                            formatHtml(item.content)
                                        }}</text>
                                    </view>
                                </view>
                                <view class="main-right align-center">
                                    <view
                                        v-if="item.shop"
                                        class="main-right-user position-relative margin-bottom-xs align-center"
                                    >
                                        <view
                                            class="main-right-image justify-center bg-white round align-center"
                                            @click.stop="handleUser(item.user_no)"
                                        >
                                            <image
                                                class="main-right-img round"
                                                :src="oss(item.shop.avatar, 35, 35, 2, 'avatar')"
                                            />
                                        </view>
                                        <view
                                            v-if="item.isFollow === 0"
                                            class="main-right-user-follow bg-red round position-absolute justify-center align-center"
                                            @click.stop="handleFollow(item.shop)"
                                        >
                                            <text class="text-min icon">&#xe644;</text>
                                        </view>
                                        <view
                                            v-if="item.isFollow === 1"
                                            class="main-right-user-follow bg-red round position-absolute justify-center align-center"
                                            @click.stop="handleFollow(item.shop)"
                                        >
                                            <text class="text-min icon text-bold">&#xe66c;</text>
                                        </view>
                                    </view>
                                    <view
                                        v-if="item.user"
                                        class="main-right-user position-relative margin-bottom-xs align-center"
                                    >
                                        <view
                                            class="main-right-image justify-center bg-white round align-center"
                                            @click.stop="handleUser(item.user_no)"
                                        >
                                            <image
                                                class="main-right-img round"
                                                :src="oss(item.user.avatar, 35, 35, 2, 'avatar')"
                                            />
                                        </view>
                                        <view
                                            v-if="item.isFollow === 0"
                                            class="main-right-user-follow bg-red round position-absolute justify-center align-center"
                                            @click.stop="handleFollow()"
                                        >
                                            <text class="text-min icon">&#xe644;</text>
                                        </view>
                                    </view>
                                    <view v-if="item.content" class="margin-top align-center" @click.stop="handleLike">
                                        <text :class="{ 'text-red': item.isLike === 1 }" class="icon text-xxxxl"
                                            >&#xe635;</text
                                        >
                                        <text class="text-white text-min">{{ item.likes }}</text>
                                    </view>
                                    <view
                                        v-if="isComment === 'Y'"
                                        class="margin-top align-center"
                                        @click.stop="handleComment"
                                    >
                                        <text class="icon text-xxxxl">&#xe68c;</text>
                                        <text class="text-white text-min">{{ item.comments }}</text>
                                    </view>
                                    <view v-if="item.content" class="margin-top align-center" @click.stop="handleShare">
                                        <text class="icon text-xxxxl">&#xe72f;</text>
                                    </view>
                                </view>
                            </view>
                            <!-- 商品 -->
                            <scroll-view
                                class="goods flex-direction"
                                :style="{ width: width + 'px' }"
                                scroll-x
                                enable-flex="true"
                                :show-scrollbar="false"
                            >
                                <view
                                    class="goods-item"
                                    :style="{ width: width * 0.8 + 'px' }"
                                    v-for="(goods, keys) in item.goods"
                                    :key="keys"
                                >
                                    <view class="flex-direction">
                                        <image class="goods-item-img" :src="oss(goods.image, 60, 60)"></image>
                                        <view class="flex-sub justify-between">
                                            <view>
                                                <text class="text-sm text-lines-mp text-black-8">{{
                                                    goods.title
                                                }}</text>
                                            </view>
                                            <view class="flex-direction justify-between">
                                                <view class="goods-item-content-details-price">
                                                    <text class="text-df text-orange">￥{{ goods.price }}</text>
                                                </view>
                                                <view
                                                    class="padding-tb-s wanl-bg-orange radius padding-lr-xs align-center flex-direction"
                                                    @click.stop="handleGoods(goods.id)"
                                                >
                                                    <text class="icon text-min">&#xe636;</text>
                                                    <text class="text-min text-white margin-left-s">立即购买</text>
                                                </view>
                                            </view>
                                        </view>
                                    </view>
                                </view>
                            </scroll-view>
                        </view>
                    </view>
                </block>
            </swiper-item>
        </swiper>
        <!-- 弹出层 -->
        <uni-popup ref="wanlCommentPopup" type="bottom">
            <view class="comment padding-bj">
                <view class="flex-direction justify-between align-center margin-bottom-bj">
                    <text></text>
                    <text class="text-white text-30">全部评论（{{ commentData.count }}）</text>
                    <text class="icon text-30" @tap="handleCommentClose">&#xe66b;</text>
                </view>
                <wanl-comment
                    :embedded="true"
                    :findId="commentData.find_id"
                    :commentList="commentData.list"
                    :commenCount="commentData.count"
                    @complete="handleComplete"
                />
                <view :style="{ height: `${bottom}px` }" />
            </view>
        </uni-popup>
        <!-- 弹出层 -->
        <uni-popup ref="wanlSharePopup" type="bottom">
            <view class="share bg-white padding-bj">
                <view class="flex-direction justify-between align-center margin-bottom-bj">
                    <text></text>
                    <text class="text-black text-30">分享到</text>
                    <text class="icon text-30 text-black" @tap="handleShareClose">&#xe66b;</text>
                </view>
                <scroll-view
                    class="share-scroll-view flex-direction"
                    scroll-x
                    :show-scrollbar="false"
                    scroll-with-animation
                >
                    <!-- #ifdef MP -->
                    <view class="share-scroll-view-item">
                        <button class="share-scroll-view-item-button" open-type="share">
                            <view class="share-scroll-view-item-button-icon justify-center align-center bg-green">
                                <text class="icon text-xxl text-white">&#xe608;</text>
                            </view>
                            <view class="margin-top-xs">
                                <text class="text-sm text-black">分享</text>
                            </view>
                        </button>
                    </view>
                    <!-- #endif -->
                    <view class="share-scroll-view-item" v-for="(item, index) in providerList" :key="index" v-if="item">
                        <button class="share-scroll-view-item-button" @tap="handleOnShare(item)">
                            <view
                                class="share-scroll-view-item-button-icon justify-center align-center"
                                :class="item.background"
                            >
                                <text v-if="item.id === 'weixin'" class="icon text-xxl text-white">&#xe608;</text>
                                <text v-if="item.id === 'sinaweibo'" class="icon text-xxl text-white">&#xe6b6;</text>
                                <text v-if="item.id === 'qq'" class="icon text-xxl text-white">&#xe60b;</text>
                                <!-- <text v-if="item.id === 'poster'" class="icon text-xxl text-black">&#xe6c8;</text> -->
                                <text v-if="item.id === 'link'" class="icon text-xxl text-black">&#xe63b;</text>
                                <text v-if="item.id === 'report'" class="icon text-xxl text-black">&#xe652;</text>
                            </view>
                            <view class="margin-top-xs">
                                <text class="text-sm text-black">{{ item.name }}</text>
                            </view>
                        </button>
                    </view>
                </scroll-view>
                <view :style="{ height: `${bottom}px` }" />
            </view>
        </uni-popup>
    </view>
</template>

<script>
import wanlFindVideo from "@/components/wanl-find/video";
// #ifdef H5
import jssdk from "@/common/libs/jssdk";
// #endif
let timer = null;
export default {
    name: "wanlFindPlay",
    components: {
        wanlFindVideo,
    },
    props: {
        find_id: {
            type: String,
            default: "",
        },
        isComment: {
            type: String,
            default: "N",
        },
        height: {
            type: Number,
            default: 0,
        },
        width: {
            type: Number,
            default: 0,
        },
        bottom: {
            type: Number,
            default: 0,
        },
        safeBottom: {
            type: Number,
            default: 0,
        },
    },
    data() {
        return {
            preload: 2, //当前页剩余个数换页
            clickNum: 0, //记录点击次数
            videoList: [],
            current_page: 1, //当前页码
            last_page: 1, //总页码
            status: "loading",
            videoIndex: 0,
            oldVideoIndex: 0,
            commentData: {},
            providerList: [],
        };
    },
    mounted() {
        this.loadData();
        // 分享
        uni.getProvider({
            service: "share",
            success: (e) => {
                let data = [];
                // #ifdef APP-PLUS
                for (let i = 0; i < e.provider.length; i++) {
                    switch (e.provider[i]) {
                        case "weixin":
                            data.push(
                                {
                                    name: "微信好友",
                                    id: "weixin",
                                    background: "bg-green",
                                    sort: 0,
                                },
                                {
                                    name: "微信朋友圈",
                                    id: "weixin",
                                    background: "bg-green",
                                    type: "WXSenceTimeline",
                                    sort: 1,
                                }
                            );
                            break;
                        case "sinaweibo":
                            data.push({
                                name: "新浪微博",
                                id: "sinaweibo",
                                background: "bg-red",
                                sort: 2,
                            });
                            break;
                        case "qq":
                            data.push({
                                name: "QQ",
                                id: "qq",
                                background: "bg-blue",
                                sort: 3,
                            });
                            break;
                        default:
                            break;
                    }
                }
                // #endif
                data.push(
                    // {
                    // 	name: '生成海报',
                    // 	id: 'poster',
                    // 	background: 'bg-gray',
                    // 	sort: 4
                    // },
                    {
                        name: "链接",
                        id: "link",
                        background: "bg-gray",
                        sort: 5,
                    }
                );
                if (this.isReport) {
                    data.push({
                        name: "举报",
                        id: "report",
                        background: "bg-gray",
                        sort: 6,
                    });
                }
                this.providerList = data.sort((x, y) => {
                    return x.sort - y.sort;
                });
            },
            fail: (e) => {
                uni.showModal({
                    content: "获取分享通道失败",
                    showCancel: false,
                });
            },
        });
    },
    methods: {
        async loadData(type) {
            this.status = "loading";
            if (type === "update") {
                if (this.current_page >= this.last_page) {
                    this.status = "noMore";
                    return false;
                } else {
                    this.current_page += 1;
                }
            }
            await uni.request({
                url: "/wanlshop/find/find/getList",
                data: {
                    type: "video",
                    page: this.current_page,
                    find_id: this.find_id,
                },
                success: (res) => {
                    if (type === "lower") {
                        this.videoList = this.videoList.concat(res.data.data);
                    } else {
                        this.videoList = res.data.data;
                        if (res.data.data.length > 0) {
                            this.$nextTick(() => {
                                this.videoPlay(this.videoIndex);
                            });
                        } else {
                            uni.showToast({
                                title: "系统还未上传任何视频！",
                                icon: "none",
                            });
                        }
                    }
                    this.current_page = res.data.current_page; //当前页码
                    this.last_page = res.data.last_page; //总页码
                    // 判断是否还有数据
                    if (res.data.current_page === res.data.last_page || res.data.total === 0) {
                        this.status = "noMore";
                    } else {
                        this.status = "more";
                    }
                },
            });
        },
        async handleFollow(shop = null) {
            if (this.$store.state.user.isLogin) {
                var data = this.videoList[this.videoIndex];
                await uni.request({
                    url: "/wanlshop/find/user/setFindUser",
                    method: "POST",
                    data: {
                        id: data.user_no,
                        type: "follow",
                    },
                    success: (res) => {
                        if (shop) {
                            let concern = this.$store.state.statistics.dynamic.concern;
                            if (res.data.data === 0) {
                                concern -= 1;
                            } else {
                                concern += 1;
                            }
                            this.$store.commit("statistics/dynamic", {
                                concern: concern,
                            });
                        }
                        data.isFollow = res.data.data;
                    },
                });
            } else {
                uni.navigateTo({
                    url: "/pages/login/login",
                });
            }
        },
        async handleLike() {
            if (this.$store.state.user.isLogin) {
                let data = this.videoList[this.videoIndex];
                // 加载网络
                await uni.request({
                    url: "/wanlshop/find/user/setFindUser",
                    method: "POST",
                    data: {
                        id: data.id,
                        type: "likes",
                    },
                    success: (res) => {
                        if (res.data.data === 0) {
                            data.likes -= 1;
                        } else {
                            data.likes += 1;
                        }
                        data.isLike = res.data.data;
                    },
                });
            } else {
                uni.navigateTo({
                    url: "/pages/login/login",
                });
            }
        },
        async handleComment() {
            if (this.$store.state.user.isLogin) {
                let data = this.videoList[this.videoIndex];
                // 加载网络
                await uni.request({
                    url: "/wanlshop/find/comments/getList",
                    data: {
                        id: data.id,
                    },
                    success: (res) => {
                        this.commentData = res.data;
                        this.commentData.find_id = data.id;
                        data.comments = res.data.count;
                        this.$refs.wanlCommentPopup.open();
                    },
                });
            } else {
                uni.navigateTo({
                    url: "/pages/login/login",
                });
            }
        },
        handleComplete(e) {
            if (e.type === "add") {
                this.handleCommentClose();
            }
            this.commentData.count = e.count;
            this.videoList[this.videoIndex].comments = e.count;
        },
        handleUser(user_no) {
            uni.navigateTo({
                url: `/pages/apps/find/user?id=${user_no}`,
            });
        },
        handleShop(id) {
            uni.navigateTo({
                url: `/pages/shop/index?id=${id}`,
            });
        },
        handleGoods(id) {
            uni.navigateTo({
                url: `/pages/product/goods?id=${id}`,
            });
        },
        handleCommentClose() {
            this.$refs.wanlCommentPopup.close();
        },
        handleShare() {
            this.$refs.wanlSharePopup.open();
        },
        handleOnShare(e) {
            let find = this.videoList[this.videoIndex];
            let href = `${this.$store.state.common.appConfig.domain}/pages/apps/find/details/video?id=${find.id}`;
            let shareType = 0; //shareType 分享类型 0.图文 1.纯文字 2.纯图片 5.小程序
            let shareText = this.formatHtml(find.content);
            let image = find.images[0];
            let shareTitle = "短视频分享";
            if (e.id == "poster") {
                // 海报维护中
            } else if (e.id == "link") {
                this.copy(href);
            } else {
                // 开始分享
                let shareOPtions = {
                    provider: e.id,
                    scene: e.type && e.type === "WXSenceTimeline" ? "WXSenceTimeline" : "WXSceneSession", //WXSceneSession”分享到聊天界面，“WXSenceTimeline”分享到朋友圈，“WXSceneFavorite”分享到微信收藏
                    type: shareType,
                    success: (e) => {
                        uni.showModal({
                            content: "已分享",
                            showCancel: false,
                        });
                    },
                    fail: (e) => {
                        uni.showModal({
                            content: e.errMsg,
                            showCancel: false,
                        });
                    },
                };
                switch (shareType) {
                    case 0:
                        shareOPtions.summary = shareText;
                        shareOPtions.imageUrl = image;
                        shareOPtions.title = shareTitle;
                        shareOPtions.href = href;
                        break;
                    case 1:
                        shareOPtions.summary = shareText;
                        break;
                    case 2:
                        shareOPtions.imageUrl = image;
                        break;
                    case 5:
                        var pages = getCurrentPages();
                        var page = pages[pages.length - 1].route;
                        shareOPtions.imageUrl = image;
                        shareOPtions.title = shareTitle;
                        shareOPtions.miniProgram = {
                            id: this.$store.state.common.appConfig.mp_weixin_id,
                            path: page, //微信小程序ID
                            webUrl: href,
                            type: 0,
                        };
                        break;
                    default:
                        break;
                }
                // if(shareOPtions.type === 0 && plus.os.name === 'iOS'){//如果是图文分享，且是ios平台，则压缩图片
                // 	shareOPtions.imageUrl = await this.compress();
                // }
                if (shareOPtions.type === 1 && shareOPtions.provider === "qq") {
                    //如果是分享文字到qq，则必须加上href和title
                    shareOPtions.href = href;
                    shareOPtions.title = shareTitle;
                }
                uni.share(shareOPtions);
            }
            this.handleShareClose();
        },
        handleShareClose() {
            this.$refs.wanlSharePopup.close();
        },
        handleTag() {
            console.log("点击标签");
        },
        // 点击视频事件
        handleClicked() {
            if (timer) {
                clearTimeout(timer);
            }
            this.clickNum++;
            timer = setTimeout(() => {
                if (this.clickNum >= 2) {
                    this.handleLike();
                } else {
                    this.videoList[this.videoIndex].play = !this.videoList[this.videoIndex].play;
                }
                this.clickNum = 0;
            }, 300);
        },
        // 播放当前视频
        videoPlay(index) {
            this.videoList[index].play = !this.videoList[index].play;
        },
        handleVideoPlay() {
            if (this.videoList.length > 0)
                this.$nextTick(() => {
                    this.videoList[this.videoIndex].play = true;
                });
        },
        handleVideoPause() {
            for (let item of this.videoList) {
                item.play = false;
            }
        },
        // 时间打标
        pauseVideo(val) {
            // 1.0.9临时
            // if (typeof this.videoList[this.oldVideoIndex].initialTime != 'undefined') {
            // 	this.videoList[this.oldVideoIndex].initialTime = val
            // }
        },
        animationFinish(e) {
            //#ifdef APP-PLUS
            this.changeCurrent(e);
            //#endif
        },
        changeCurrent(e) {
            this.videoIndex = e.detail.current;
            this.$nextTick(() => {
                for (let item of this.videoList) {
                    item.play = false;
                }
                this.videoList[this.videoIndex].play = true;
            });
        },
        // 格式化html
        formatHtml(content) {
            return content.replace(/<\/?.+?>/g, "").replace(/ /g, "");
        },
        copy(content) {
            // 复制内容，必须字符串，数字需要转换为字符串
            content = typeof content === "string" ? content : content.toString();
            //#ifndef H5
            uni.setClipboardData({
                data: content,
                success: function () {
                    uni.showToast({
                        title: `复制成功 ${content}`,
                        icon: "none",
                    });
                },
                fail: function () {
                    uni.showToast({
                        title: `复制失败`,
                        icon: "none",
                    });
                },
            });
            //#endif
            // #ifdef H5
            if (!document.queryCommandSupported("copy")) {
                //为了兼容有些浏览器 queryCommandSupported 的判断
                msg("浏览器不支持");
            }
            let textarea = document.createElement("textarea");
            textarea.value = content;
            textarea.readOnly = "readOnly";
            document.body.appendChild(textarea);
            textarea.select(); // 选择对象
            textarea.setSelectionRange(0, content.length); //核心
            let result = document.execCommand("copy"); // 执行浏览器复制命令
            if (result) {
                uni.showToast({
                    title: `复制成功 ${content}`,
                    icon: "none",
                });
            } else {
                uni.showToast({
                    title: `复制失败`,
                    icon: "none",
                });
            }
            textarea.remove();
            // #endif
        },
        oss(url, w = 120, h = 120, modenum = 2, type = "", format = "jpg", resize = "resize", multiple = 3) {
            let ossStc = this.$store.state.common.appUrl.oss;
            let image = "";
            let mode = ["m_lfit", "m_mfit", "m_fill", "m_fixed"];
            // 图像，自适应方向：1，渐进显示：1，转换格式：jpg，图片质量：q_90，图片锐化：50，浓缩图
            let rule = [
                "?x-oss-process=image",
                "auto-orient,1",
                "interlace,1",
                "format,jpg",
                "quality,q_90",
                "sharpen,50",
                "resize,m_fixed,w_120,h_120",
            ];
            // 转换格式
            if (format == "png") {
                rule[3] = ["format", "png"].join(",");
            }
            // 判断是否有高度
            if (w == 0) {
                rule[6] = [resize, mode[modenum], `h_${h * multiple}`].join(",");
            } else if (h == 0) {
                rule[6] = [resize, mode[modenum], `w_${w * multiple}`].join(",");
            } else {
                rule[6] = [resize, mode[modenum], `w_${w * multiple}`, `h_${h * multiple}`].join(",");
            }
            //当地址不存在
            if (url) {
                if (/^data:image\//.test(url)) {
                    image = url;
                } else if (/^(http|https):\/\/.+/.test(url)) {
                    rule.pop();
                    image = url + rule.join("/");
                } else {
                    image = ossStc + url + rule.join("/");
                }
            } else {
                if (type == "transparent") {
                } else if (type == "avatar") {
                    image = ossStc + "/common/mine_def_touxiang_3x.png";
                } else {
                    image = ossStc + "/common/img_default3x.png";
                }
            }
            return image;
        },
    },
    watch: {
        // 加载新的视频
        videoIndex(newVal, oldVal) {
            if (this.videoList.length - this.videoIndex - 1 <= this.preload) {
                this.loadData("update");
            }
            this.oldVideoIndex = oldVal;
        },
    },
};
</script>

<style>
@import "@/static/style/wanlnvue.css";

.share {
    border-top-left-radius: 26rpx;
    border-top-right-radius: 26rpx;
}
.share-scroll-view {
    /* #ifndef APP-PLUS */
    white-space: nowrap;
    /* #endif */
}
.share-scroll-view-item {
    /* #ifndef APP-PLUS */
    display: inline-flex;
    /* #endif */
    margin-right: 36rpx;
}
.share-scroll-view-item-button {
    background-color: rgba(0, 0, 0, 0);
    border: 0;
    padding: 0;
    flex-direction: column;
}
.share-scroll-view-item-button-icon {
    width: 100rpx;
    height: 100rpx;
    border-radius: 5000rpx;
}
/* #ifndef APP-PLUS */
button:after {
    border: 0;
}
/* #endif */

.video {
    background-color: #000000;
}

.left-describe {
    /* #ifndef APP-PLUS */
    display: inline;
    /* #endif */
}
.main-right {
    width: 98rpx;
}
.main-right-user {
    height: 116rpx;
    width: 98rpx;
}
.main-right-user-follow {
    width: 40rpx;
    height: 40rpx;
    bottom: 0;
    z-index: 999;
}
.main-right-image {
    width: 98rpx;
    height: 98rpx;
}
.main-right-img {
    width: 90rpx;
    height: 90rpx;
}
.goods {
    /* #ifndef APP-PLUS */
    white-space: nowrap;
    /* #endif */
    height: 174rpx;
}
.goods-item {
    /* #ifndef APP-PLUS */
    display: inline-block;
    /* #endif */
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 18rpx;
    margin-left: 14rpx;
    padding: 14rpx;
    height: 154rpx;
}
.goods-item-img {
    height: 126rpx;
    width: 126rpx;
    margin-right: 14rpx;
    border-radius: 4rpx;
}
.comment {
    background-color: rgba(10, 10, 10, 0.9);
    border-top: 2rpx solid rgba(255, 255, 255, 0.1);
    border-top-left-radius: 26rpx;
    border-top-right-radius: 26rpx;
}
</style>
